<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js传参多图切换</title>
    <style>
        p,ul,h3{ margin:0; padding:0; }
        em { font-style:normal; }
        strong{ font-weight: normal}
        li { list-style:none; }
        .clear { zoom:1; }
        .clear:after { content:''; display:block; clear:both; }
        .box{ width: 572px;border: 1px solid #333;margin: 30px auto; padding: 0px 2px; background-color:#dddddc; padding: 2px; border: 1px solid #bcbcbb;}
        .nav li{ width: 90px;height: 50px; border: 1px solid #bfbfbe;position: relative; cursor: pointer;}
        .nav  li img{ position: absolute; top:5px ; left:33px; }
        .nav  li p{ color: #313130; font-size: 12px; position: absolute; top:32px ; left:18px;}
        .nav  .active{ background: #fff;}
        .warp{float: left; width: 388px; height: 208px; position: relative}
        .nav{float: left}
        .warp img{ width: 386px; height: 208px; }
    </style>
    <script>
        window.onload=function(){
            var imgArr=["img/mv/1.jpg","img/mv/2.jpg","img/mv/3.jpg","img/mv/4.jpg","img/mv/5.jpg","img/mv/6.jpg","img/mv/7.jpg","img/mv/1.jpg"];
            var oDiv=document.getElementById("box");
            var oLI=oDiv.getElementsByTagName("li");
            var oDiv_1=document.getElementById("warp");
            var oImg=oDiv_1.getElementsByTagName("img")[0];
            var oUl=document.getElementById("list");
            var li_1=oUl.getElementsByTagName("li");
            var oUl_1=document.getElementById("lists");
            var li_2=oUl_1.getElementsByTagName("li");
            var arr=[];
            for(var i=0;i<li_1.length;i++){
                arr.push(li_1[i]);
            }
            for(var i=li_2.length-1;i>=0;i--){
                arr.push(li_2[i]);
            }
            var num=0;
            oImg.src=imgArr[num];
            var than=null;
            for(var i=0;i<oLI.length;i++){
                oLI[i].index=i;
                oLI[i].onclick=function(){
                    if(than!=null){
                        than.style.background="none";
                    }
                    num=this.index;
                    oImg.src=imgArr[num];
                    this.style.background="#ed3754";
                    than=this;
                 }
            }
            var timer=null;
            function autoPlay(){
                clearInterval(timer);
                timer=setInterval(function(){
                    if(than!=null){
                        than.style.background="none";
                    }
                    oImg.src=imgArr[num];
                    arr[num].style.background="#ed3754";
                    than=arr[num];
                    if(num>=oLI.length-1){
                        num=0;
                    }else{
                        num++;
                    }
                },500)
            }
            autoPlay();
        }
    </script>
</head>
<body>
<div class="box clear" id="box">
    <div class="nav">
        <ul id="list">
            <li>
                <img src="img/cc/1.jpg"/>
                <p> 最热团购</p>
            </li>
            <li>
                <img src="img/cc/2.jpg"/>
                <p>商城特惠</p>
            </li>
            <li>
                <img src="img/cc/3.jpg"/>
                <p>名牌推荐</p>
            </li>
            <li>
                <img src="img/cc/4.jpg"/>
                <p>缤纷活动</p>
            </li>
        </ul>
    </div>
    <div class="warp clear" id="warp">
        <img />
    </div>
    <div class="nav">
        <ul id="lists">
            <li>
                <img src="img/cc/1.jpg"/>
                <p> 最热团购</p>
            </li>
            <li>
                <img src="img/cc/2.jpg"/>
                <p>商城特惠</p>
            </li>
            <li>
                <img src="img/cc/3.jpg"/>
                <p>名牌推荐</p>
            </li>
            <li>
                <img src="img/cc/4.jpg"/>
                <p>缤纷活动</p>
            </li>
        </ul>
    </div>
</div>

</body>
</html>